<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myStrategyComment.css"/>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>

        </div>
        <div class="col">
            <span>点评</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <form id="commentForm" method="post">
        <div class="container star">
            <p>你对该旅游地的评价</p>
            <i class="fa fa-star-o fa-lg" data-num="1"></i>
            <i class="fa fa-star-o fa-lg" data-num="2"></i>
            <i class="fa fa-star-o fa-lg" data-num="3"></i>
            <i class="fa fa-star-o fa-lg" data-num="4"></i>
            <i class="fa fa-star-o fa-lg" data-num="5"></i>
        </div>
        <hr/>
        <div class="container tag">
            <p>请为该旅游地选择合适的标签（大家都在评）</p>
            <div class="btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-outline-danger ">
                    <input type="checkbox" autocomplete="off" value="价格便宜"> 价格便宜
                </label>
                <label class="btn btn-outline-danger">
                    <input type="checkbox" autocomplete="off" value="住宿方便"> 住宿方便
                </label>
                <label class="btn btn-outline-danger ">
                    <input type="checkbox" autocomplete="off" value="旅游景点多"> 旅游景点多
                </label>
                <label class="btn btn-outline-danger ">
                    <input type="checkbox" autocomplete="off" value="适合拍照">适合拍照
                </label>
                <label class="btn btn-outline-danger">
                    <input type="checkbox" autocomplete="off" value="吃的很多">吃的很多
                </label>
                <label class="btn btn-outline-danger">
                    <input type="checkbox" autocomplete="off" value="交通不方便">交通不方便
                </label>
            </div>

            <p>添加你自己的标签</p>
            <input name="myTags" class="form-control" placeholder="请使用空格隔开标签，每个标签不超8个字"/>

            <p>更多评价内容</p>
            <textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
        </div>
    </form>
    <div class="container imgs ">
        <p>上传图片</p>

        <div class="row">
            <form id="imgForm" method="post" action="/images" enctype="multipart/form-data">
                <!--<input type="file" name="pic" multiple onchange="selectImage(this)" accept="image/gif, image/jpeg, image/png" id="upload" >-->
                <input type="file" style="display: none" name="pic"/>
            </form>
            <div class="col-3 rect">
                <input type="hidden" name="imgs">
                <span>上传</span>
            </div>
            <div class="col-3 rect">
                <input type="hidden" name="imgs">
                <span>上传</span>
            </div>
            <div class="col-3 rect">
                <input type="hidden" name="imgs">
                <span>上传</span>
            </div>
            <div class="col-3 rect">
                <input type="hidden" name="imgs">
                <span>上传</span>
            </div>
            <div class="col-3 rect">
                <input type="hidden" name="imgs">
                <span>上传</span>
            </div>
        </div>
    </div>
</div>


<div class="operation">
    <button class="btn" onclick="window.history.go(-1)">放弃评价</button>
    <button class="btn" id="submitBtn">提交评价</button>
</div>

</body>
<script>
    var id = getParams().id;
    var star;
    var dv;
    var lb;
    var img;
    $(".fa").click(function () {
        var num = $(this).data("num");
        $.each($(".star i"), function (index, ele) {
            // console.log(index);
            if (index < num) {
                $(ele).css("background", "yellow");
            } else {
                $(ele).css("background", "white");
            }
        });
        star = num;

    });
    var param = {
        "userId": getUser().id,
        "label": "",
        "content": "",
        "image": "",
        "star": 0,
        "type": 1,
        "stratagyType": 1,
        "stratagyId": 1
    };
    $("#submitBtn").click(function () {
        if (id) {
            param.stratagyType = id;
            param.stratagyId = id;
        }
        if (star) {
            param.star = star;
        }
        //设置系统标签值
        $.each($(".active input"), function (index, ele) {
            // console.log("tag",$(this).val());
            var label = $(ele).val();
            if (label) {
                lb = lb + "," + label;
                // param.labels.push(label);
            }
        });
        //设置图片url
        $.each($(".rect"), function (index, ele) {
            var bg = $(this).css("background-image");
            var url = $(ele).find("input").val();
            if (bg && url) {
                img = img + "," + url;
            }
        });
        param.image = img;
        //设置用户标签
        var tags = $("input[name=myTags]").val();
        // console.log("mytag",tags);
        if (tags) {
            lb = lb + "," + tags;
            param.label = lb;
        }
        //设置评论内容
        var content = $("textarea[name=content]").val();
        // console.log("content",content);
        if (content) {
            param.content = content;
        }

        //提交
        $.post("/comments", param, function (data) {
            // console.log(data);
            if (data.success) {
                //跳转到登录界面
                $(document).dialog({
                    type: "confirm",
                    style: "ios",
                    titleShow: false,
                    content: "点评成功!",
                    buttons: [{
                        name: "返回上一页",
                        callback: function () {
                            // window.close();
                            // window.open("about:blank","_self").close();
                            //返回上一页并刷新
                            window.history.go(-1);
                            location.reload();

                        }
                    }]
                });
                // location.href="/strategyCatalogs.html?id="+id;
            } else {
                //注册失败提示
                $(document).dialog({
                    titleShow: false,
                    autoClose: 1500,
                    content: "网络连接错误,点评失败!"
                });
            }
        })
    });
    $(".rect").click(function () {
        dv = $(this);
        $(":file").click();
    });
    //给隐藏的文件上传控件绑定值改变事件
    $(":file").change(function () {
        if (this.value) {
            //上传图片
            $("#imgForm").ajaxSubmit(function (data) {
                //回填图片URL
                // console.log(data);
                dv.css("background-image", "url('" + data.url + "')");
                dv.find("span").html("");
                dv.find("input").val(data.url);
                // console.log(dv.find("input").val());
            });
        }
    });

</script>
</html>